<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/3/31
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>querySelect</title>
    <link rel="stylesheet" href="<%=basePath%>/css/chosen.css">
    <script src="<%=basePath%>/js/jquery-2.1.0.js"></script>
    <script src="<%=basePath%>/js/chosen.jquery.js"></script>
    <script>
        $(function(){
            $('.dept_select').chosen({
                no_results_text: "没有找到",
                search_contains: true
            });
            $('#test2').chosen({
                no_results_text: "没有找到",
                search_contains: true,
                disable_search:true//没有搜索框了
            });
            /*测试样式*/
            $('.test3').chosen( );
            $('#test3').chosen( );
            $('#duhao').chosen({
                no_results_text: "没有找到",
                search_contains: true
            });
            $('#duhao2').chosen({
                no_results_text: "没有找到",
                search_contains: true
            });
        });
        function addSelect() {

            var add=" <option value='方水电费'> 士大夫</option>";
            $('.dept_select').append(add);
            $('#test2').append(add);

            $('.dept_select').trigger('chosen:updated');//更新选项
            $('#test2').trigger('chosen:updated');//更新选项
            $('#test3_chosen').css("border-style","none");
        }
    </script>
</head>
<body>
<%--在class上加querySelect属性--%>
<select  style="width: 150px;" class="dept_select">
    <option value="是否">阿斯蒂芬</option>
    <option value="方水电费"> 士大夫</option>
</select>
<%--在id上加querySelect属性   在生成的Select有个独立的id为id+_chosen 可以设置其属性（id，withd,等）--%>
<select  style="width: 150px;" id="test2">
    <option value="是否">阿斯蒂芬</option>
    <option value="方水电费"> 士大夫</option>
</select>
<button onclick="addSelect()">增加</button>

<%--样式测试--%>
<select  data-placeholder="选择..." style="width: 150px;" class="test3">
    <option></option>
    <optgroup label="1">
        <option value="是否">阿斯蒂芬</option>
        <option value="方水电费"> 士大夫</option>
     <optgroup label="2">
            <option value="是否">阿斯蒂芬</option>
            <option value="方水电费"> 士大夫</option>
     <optgroup label="3">
             <option value="是否">阿斯蒂芬</option>
            <option value="方水电费"> 士大夫</option>
</select>
<select  id="test3" data-placeholder="选择..."   style="width: 200px; height: 13px; line-height: 16px; border-style: none;">
    <option></option>
    <option value="是否">阿斯蒂芬</option>
    <option value="方水电费"> 士大夫</option>
</select>
<select id="duhao" multiple style="width: 200px; height: 13px; line-height: 16px; border-style: none;">
    <option></option>
    <option value="Personalize">Personalize</option>
    <option value="BlackBerry">BlackBerry</option>
    <option value="device">device</option>
    <option value="with">with</option>
</select>
<select id="duhao2"data-placeholder="选择..."  multiple >
    <option></option>
    <option value="Personalize">Personalize</option>
    <option value="BlackBerry">BlackBerry</option>
    <option value="device">device</option>
    <option value="with">with</option>
</select>
</body>
</html>
